<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    li{
      list-style: none; /*去除li标签的小圆点*/
    }
    .center{
      width: 1200px;
      margin: 0 auto;
      /* background: blue;
      height: 80px; */
    }
    .fl{  /*左浮动*/
      float: left;
    }
    .fr{  /*右浮动*/
      float: right;
    }
    .clear::after{  /*清除浮动*/
      display: block;
      content: '';
      clear: both;
    }

    /* 导航样式开始 */
    header{
      height: 80px;
      border-bottom:1px solid #ccc ; /*下边框*/
    }
    .logo{
      margin-top: 20px;
    }
    .area{
      line-height: 80px; /*设置行高  让文字垂直居中*/
      border-left: 1px solid transparent;  /*透明边框*/
      border-right: 1px solid transparent;
      margin-left: 10px;
      padding: 0 10px;
    }
    .area:hover{  /*鼠标移上去的样式*/
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
    }
    .area img{
      width: 12px;
    }
    nav ul{
      line-height: 80px;
      margin-left: 10px;
    }
    nav ul li{
      padding: 0 20px;
      font-size: 18px;
    }
    nav ul li:hover{
      color: #E5342A;
    }
    nav ul li.active{
      background: #E5342A;
      color: #fff;
    }
    nav ul li.active:hover{
      color: #fff;
    }
    .app{
      line-height: 80px;
      border-left: 1px solid transparent;
      border-right: 1px solid transparent;
      padding-right: 10px;
      margin-left: 20px;
    }
    .app:hover{
      border-color: #ccc;
    }
    .app img{
      width: 12px;
    }
    .app img:first-of-type{  /*class是app  下面的第一张图 */
      width: 30px;
      position: relative;
      top: 8px;
      left: 6px;
    }
    .search{
      position: relative;
      padding-top: 19px;
    }
    .search input{
      background: #FAF8FA;
      border: 1px solid #ccc;
      border-radius: 80px; /*添加圆角*/
      outline: none;  /*去除点击的时候的样式*/
      padding: 0 20px;
      height: 40px;
    }
    .search button{
      border: none;
      background: #E5342A;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      position: absolute;
      top: 19px;
      right: 0;
    }
    .search button img{
      width: 20px;
    }


    /* 主体样式 */
    .main{
      margin-top: 50px;
    }
    .aside{
      width: 360px;
    }
    .content{
      width: 750px;
    }
    .hot>div:first-of-type h3{
      font-size: 24px;
      font-weight: 500;
      color: #E5342A;
    }
    .hot>div:first-of-type p{
      color: #E5342A;
      font-size: 13px;
      margin-top: 20px;
    }
    .list{
      margin-top: 30px;
    }
    .list>div{
      width: 160px;
      margin-right: 36px;
    }
    .list>div:last-of-type{
      margin-right: 0;
    }

    .movie{
      position: relative;
    }
    .movie-title{
      position: absolute;
      color: #fff;
      bottom: 8px;
      left: 8px;
    }
    .movie-rate{
      position: absolute;
      bottom: 8px;
      right: 8px;
      color: #ff9900;
      font-style: italic; /*设置字体样式为倾斜*/
    }
    .movie-type{
      position: absolute;
      background: #0084FF;
      color: #fff;
      top: 10px;
      font-size: 12px;
      font-style: italic;
      padding: 3px 8px;
      left: -3px;
    }
    .list>div>button{
      width: 100%;
      height: 40px;
      background: #fff;
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      border-top: none;
      position: relative;
      top: -5px;
      color: #E5342A;
    }

    .list>div>button:hover{
      background: #E5342A;
      color: #fff;
    }

    .son{
      margin-top: 90px;
    }
    .son>div:first-of-type h3,.son>div:first-of-type p{
      color: #2D98F3 !important;
    }

    .mt80{
      margin-top: 80px;
    }


    .yushou{
      position: relative;
      top: -5px;
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
    }
    .yushou p{
      color: #FFB400;
      padding: 10px 0 10px 10px;
      font-size:13px ;
      background: #FBFBFB;
    }
    .yushou button{
      border: none;
      width: 50%;
      height: 40px;
      background: none;
      
    }
    .yushou button:first-of-type{
      border-right: 1px solid #ccc;
    }
    .time{
      text-align: center;
      color: #999;
      margin-top: 4px;
      font-style: 14px;
    }
    .nbmovie{
      width: 356px !important;
      
    }


    /* 侧边栏样式 */
    .aside-content h3{
      font-size: 24px;
      font-weight: 500;
      color: #E5342A;
    }
    .no1{
      border: 1px solid #ccc;
      
    }
    .no1:hover{
      background: #F7F7F7;
    }
    .no1>div:first-of-type{
      width: 120px;
      position: relative;
      height: 80px;
    }
    
    .no1>div:last-of-type{
      width: 238px;
    }
    .mt30{
      margin-top: 30px;
    }
    .aside .no1 .title{
      margin: 15px 0 0 20px;
      font-size: 18px;
      color: #333333;
    }
    .aside .no1 .piaofang{
      margin-left: 20px;
      margin-top: 5px;
      font-size: 13px;
      color: #E5342A;
    }
    .aside li{
      height: 50px;
      line-height: 50px;
    }
    .aside ul{
      margin-top: 15px;
    }
    .aside li:hover{
      background: #F7F7F7;
    }
    .aside li:first-of-type p:first-of-type, .aside li:nth-of-type(2) p:first-of-type{
      color: #E5342A !important;
    }
    .aside li p:first-of-type{  /*序号*/
      color: #999;
      margin-right: 20px;
      font-size: 18px;
      font-style: italic;
    }
    .aside li p:last-of-type{  /*票房*/
      color: #E5342A;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <!-- 导航 -->
  <header>
    <nav class="center">
      <!-- logo -->
      <img  class="fl logo" src="">
      <!-- 地区 -->
      <div class="fl area">
        太原
        <img src="img/sanjiaoxing.png" alt="">
      </div>
      <ul class="clear fl">
        <li class="fl active">首页</li>
        <li class="fl">电影</li>
        <li class="fl">影院</li>
        <li class="fl">演出</li>
        <li class="fl">榜单</li>
        <li class="fl">热点</li>
        <li class="fl">商城</li>
      </ul>
      <div class="fl app">
        <img src="img/phone.png" alt="">
        APP下载
        <img src="img/sanjiaoxing.png">
      </div>
      <div class="fl search">
        <input type="text" placeholder="找影视剧，影院，影人">
        <button>
          <img src="img/search.png" alt="">
        </button>
      </div>
    </nav>  
  </header>

  <!-- 主体 整体宽度1200    右侧360   左侧：750 -->
  <div class="main center clear">
    <div class="fl content">
      <!-- 正在热映 -->
      <div class="hot">
        <div class="clear">
          <h3 class="fl">正在热映（26部）</h3>
          <p class="fr">全部</p>
        </div>

        <!-- 电影列表  总宽度为750  电影的宽度为160 间距为16px -->
        <div class="list clear">
          <div class="fl">
            <div class="movie">
              <img src="https://p0.meituan.net/movie/ba78007f92a933aa84ec47acab27ff214040773.jpg@160w_220h_1e_1c" alt="">
              <p class="movie-title">李茂扮太子电影海报</p>
              <p class="movie-rate">9.5</p>
              <p class="movie-type">2DIMAX</p>
            </div>
            <button>购票</button>
          </div>
          <div class="fl">
            <div class="movie">
              <img src="https://p0.meituan.net/movie/cd6f1b7ae8adb429374139b73b3080b71530477.jpg@160w_220h_1e_1c" alt="">
              <p class="movie-title">反贪风暴5：最终章</p>
              <p class="movie-rate">9.5</p>
              <p class="movie-type">2DIMAX</p>
            </div>
            <button>购票</button>
          </div>
          <div class="fl">
            <div class="movie">
              <img src="https://p0.meituan.net/movie/ba78007f92a933aa84ec47acab27ff214040773.jpg@160w_220h_1e_1c" alt="">
              <p class="movie-title">穿过寒冬拥抱你</p>
              <p class="movie-rate">9.5</p>
              <p class="movie-type">2DIMAX</p>
            </div>
            <button>购票</button>
          </div>
          <div class="fl">
            <div class="movie">
              <img src="https://p0.meituan.net/movie/addf7c8023c01237d1ab701aab2b31b82798672.jpg@160w_220h_1e_1c" alt="">
              <p class="movie-title">爱情神话</p>
              <p class="movie-rate">9.5</p>
              <p class="movie-type">2DIMAX</p>
            </div>
            <button>购票</button>
          </div>
        </div>
        <div class="list clear">
          <div class="fl">
            <div class="movie">
              <img src="https://p0.meituan.net/mmdb/46d9c0558dff78275d310577bf9ee74e14182914.jpg@160w_220h_1e_1c" alt="">
              <p class="movie-title">误杀2</p>
              <p class="movie-rate">9.5</p>
              <p class="movie-type">2DIMAX</p>
            </div>
            <button>购票</button>
          </div>
          <div class="fl">
            <div class="movie">
              <img src="https://p1.meituan.net/movie/b6d19aa5041bd972e74a176d56b3a5384478764.jpg@160w_220h_1e_1c" alt="">
              <p class="movie-title">以年为单位的恋爱</p>
              <p class="movie-rate">9.5</p>
              <p class="movie-type">2DIMAX</p>
            </div>
            <button>购票</button>
          </div>
          <div class="fl">
            <div class="movie">
              <img src="https://p0.meituan.net/movie/3609d51e681a61bee795569fcf9824f1807389.jpg@160w_220h_1e_1c" alt="">
              <p class="movie-title">魔法满屋</p>
              <p class="movie-rate">9.5</p>
              <p class="movie-type">2DIMAX</p>
            </div>
            <button>购票</button>
          </div>
          <div class="fl">
            <div class="movie">
              <img src="https://p0.meituan.net/movie/dcc0411b145d4336a7f67e650d17964e1846717.jpg@160w_220h_1e_1c" alt="">
              <p class="movie-title">扬名立万</p>
              <p class="movie-rate">9.5</p>
              <p class="movie-type">2DIMAX</p>
            </div>
            <button>购票</button>
          </div>
        </div>
      </div>

      <!-- 即将上映 -->
      <div class="hot son">
        <div class="clear">
          <h3 class="fl">即将上映（86部）</h3>
          <p class="fr">全部</p>
        </div>

        <!-- 电影列表  总宽度为750  电影的宽度为160 间距为16px -->
        <div class="list clear">
          <div class="fl">
            <div class="movie">
              <img src="https://p0.meituan.net/movie/0da9e97e078d23916bed21f201f3982d1877057.jpg@160w_220h_1e_1c" alt="">
              <p class="movie-title">萌鸡小队：萌闯新世界</p>
            </div>
            <div class="yushou">
              <p>4567895人想看</p>
              <button>预告片</button><button>预售</button>
            </div>
            <p class="time">1月7号上映</p>

          </div>
          <div class="fl">
            <div class="movie">
              <img src="https://p0.meituan.net/movie/d8bf6152994a9d40add004211e6f7c3d4013026.jpg@160w_220h_1e_1c" alt="">
              <p class="movie-title">浴血大别山</p>
            </div>
            <div class="yushou">
              <p>4567895人想看</p>
              <button>预告片</button><button>预售</button>
            </div>
            <p class="time">1月7号上映</p>

          </div>
          <div class="fl">
            <div class="movie">
              <img src="https://p0.meituan.net/movie/6f3996f1466b7fceb8e61bbc6583f08f2811520.jpg@160w_220h_1e_1c" alt="">
              <p class="movie-title">农民院士</p>
            </div>
            <div class="yushou">
              <p>4567895人想看</p>
              <button>预告片</button><button>预售</button>
            </div>
            <p class="time">1月7号上映</p>

          </div>
          <div class="fl">
            <div class="movie">
              <img src="https://p0.meituan.net/movie/932b588f405af509c047b2890c7b8fbb2129855.jpg@160w_220h_1e_1c" alt="">
              <p class="movie-title">围墙</p>
            </div>
            <div class="yushou">
              <p>4567895人想看</p>
              <button>预告片</button><button>预售</button>
            </div>
            <p class="time">1月7号上映</p>

          </div>
        </div>
        <div class="list clear">
          <div class="fl">
            <div class="movie">
              <img src="https://p0.meituan.net/mmdb/40a40b8b0068d2c031b087d8979eb869481853.jpg@160w_220h_1e_1c" alt="">
              <p class="movie-title">黑客帝国：矩阵重启</p>
            </div>
            <div class="yushou">
              <p>4567895人想看</p>
              <button>预告片</button><button>预售</button>
            </div>
            <p class="time">1月7号上映</p>

          </div>
          <div class="fl">
            <div class="movie">
              <img src="https://p1.meituan.net/movie/c5550a2059c3d41a30b80e79548625754013145.jpg@160w_220h_1e_1c" alt="">
              <p class="movie-title">汪汪队立大功大电影</p>
            </div>
            <div class="yushou">
              <p>4567895人想看</p>
              <button>预告片</button><button>预售</button>
            </div>
            <p class="time">1月7号上映</p>

          </div>
          <div class="fl">
            <div class="movie">
              <img src="https://p0.meituan.net/movie/06f139e575e89d2ff685b83c851c9164399523.jpg@160w_220h_1e_1c" alt="">
              <p class="movie-title">九妹</p>
            </div>
            <div class="yushou">
              <p>4567895人想看</p>
              <button>预告片</button><button>预售</button>
            </div>
            <p class="time">1月7号上映</p>

          </div>
          <div class="fl">
            <div class="movie">
              <img src="https://p0.meituan.net/movie/51913604aa9ce79108d3f134c367dec35108652.jpg@160w_220h_1e_1c" alt="">
              <p class="movie-title">东北虎</p>
            </div>
            <div class="yushou">
              <p>4567895人想看</p>
              <button>预告片</button><button>预售</button>
            </div>
            <p class="time">1月7号上映</p>

          </div>
        </div>
      </div>
      <!-- 热播电影 -->
      <div class="hot mt80">
        <div class="clear">
          <h3 class="fl">热播电影</h3>
          <p class="fr">全部</p>
        </div>

        <!-- 电影列表  总宽度为750  电影的宽度为160 间距为16px -->
        <div class="list clear">
          <div class="fl nbmovie">
            <div class="movie">
              <img src="https://p1.meituan.net/movie/3ee52ce5d15a09e07eaa346d1230f97f55997.jpg@350w_220h_1e_1c" alt="">
              <p class="movie-title">厉鬼将映</p>
              <p class="movie-rate">9.5</p>
            </div>
          </div>
          
          <div class="fl">
            <div class="movie">
              <img src="https://p0.meituan.net/movie/ba78007f92a933aa84ec47acab27ff214040773.jpg@160w_220h_1e_1c" alt="">
              <p class="movie-title">穿过寒冬拥抱你</p>
              <p class="movie-rate">9.5</p>
            </div>
          </div>
          <div class="fl">
            <div class="movie">
              <img src="https://p0.pipi.cn/mmdb/d2dad592b12f2ab12d339e7ef5bd56a01e21d.jpg?imageView2/1/w/160/h/220" alt="">
              <p class="movie-title">夏洛特烦恼</p>
              <p class="movie-rate">9.5</p>
            </div>
          </div>
        </div>
        <div class="list clear">
          <div class="fl">
            <div class="movie">
              <img src="https://p0.pipi.cn/mmdb/d2dad592b12f2a030c030cc45d1917ed1b610.jpg?imageView2/1/w/160/h/220" alt="">
              <p class="movie-title">唐人街探案</p>
              <p class="movie-rate">9.5</p>
            </div>
          </div>
          <div class="fl">
            <div class="movie">
              <img src="https://p0.pipi.cn/mmdb/d2dad592b125bfc9fd1789337993cec80ab62.jpg?imageView2/1/w/160/h/220" alt="">
              <p class="movie-title">战狼</p>
              <p class="movie-rate">9.5</p>
            </div>
          </div>
          <div class="fl">
            <div class="movie">
              <img src="https://p0.pipi.cn/mmdb/d2dad592b125bfbe2a87a9aa10a4ba4bd4f8d.webp?imageView2/1/w/160/h/220" alt="">
              <p class="movie-title">魁拔Ⅲ战神崛起</p>
              <p class="movie-rate">9.5</p>
            </div>
          </div>
          <div class="fl">
            <div class="movie">
              <img src="https://p0.meituan.net/movie/ba78007f92a933aa84ec47acab27ff214040773.jpg@160w_220h_1e_1c" alt="">
              <p class="movie-title">穿过寒冬拥抱你</p>
              <p class="movie-rate">9.5</p>
            </div>
          </div>
        </div>
      </div>
     
    </div>
    <div class="fr aside">

      <!-- 今日票房 -->

      <div class="aside-content">
        <h3>今日票房</h3>
        <div class="no1 mt30 clear">
          <div class="fl">
            <img src="https://p0.pipi.cn/friday/e7cc8c2f0399f286b04fa808d014479f.jpg?imageView2/1/w/120/h/80" alt="">
          </div>
          <div class="fr">
            <p class="title">穿过寒冬拥抱你</p>
            <p class="piaofang">531.21万</p>
          </div>
        </div>
        <ul>
          <li class="clear">
            <p class="fl">2</p>
            <p class="fl">唐人街探案</p>
            <p class="fr">389.04万</p>
          </li>
          <li class="clear">
            <p class="fl">3</p>
            <p class="fl">战狼</p>
            <p class="fr">389万</p>
          </li>
          <li class="clear">
            <p class="fl">4</p>
            <p class="fl">李茂扮太子</p>
            <p class="fr">388.04万</p>
          </li>
          <li class="clear">
            <p class="fl">5</p>
            <p class="fl">以年为单位的恋爱</p>
            <p class="fr">387.83万</p>
          </li>
        </ul>
      </div>



      <!-- 最受期待 -->
      <!-- TOP 100 -->
      <!-- 热门影人 -->
      <!-- 娱乐热点 -->

    </div>
  </div>

</body>
</html>